<template>
<div class="aaa">
    <div class="search">
        <span class="iconfont">&#xe627;</span>

        <input type="txet" placeholder="请输入要搜索的城市" class="search-input" v-model="keyword" :class="[changesearch]">

        <span class="cannel" :class="[changesymbol]" @click="xclear">x</span>
        <button class="button" :class="[changebutton]" @click="buttonclear">取消</button>
    </div>
    <div class="search-content" v-show="this.list.length" ref="awrapper1">
        <div class="wrapper2">
            <ul>
                <li class="search-first">{{this.csm}}</li>
                <li class="search-item" v-for="item of this.list" :key="item.id" @click="handleItemClick(item.name)">{{item.name}}</li>

            </ul>
        </div>
    </div>

</div>
</template>

<script>
//	引入
import BScroll from '@better-scroll/core'
import PullUp from '@better-scroll/pull-up'
import {
    disreslove
} from '../../../utils/utils.js'

//	定义输出组件name
export default {
    name: 'locationHeader',
    //注册组件
    props: {
        cities: Object
    },
    data() {
        return {
            csm: "请输入城市名",
            keyword: '',
            changesearch: '',
            changebutton: '',
            changesymbol: '',
            iLetter: '',
            iWord: '',
            list: [

            ],
            flag: "1"

        }
    },
    mounted() {
        // 定义固定视图去除滚动条
        // this.scroll = new BScroll(this.$refs.wrapper1, {
        //     click: true,
        //     pullUpLoad: true,
        //     mouseWheel: {
        //         speed: 20,
        //         invert: false,
        //         easeTime: 300

        //     }
        // })

    },
    watch: {
        keyword() {
            this.initScroll1() // 定义固定视图去除滚动条
            let content = this.keyword.trim()
            this.addclass()
            if (content === '') {
                //  内容为空
                // flag代表内容为空时的区分标志位
                // 1代表本身没输入或者逐字清除
                // 2代表点击清除按钮
                // 剩余的代表点击X按钮
                if (this.flag === '1') {
                    this.removback()

                } else if (this.flag === '2') {
                    this.keyword = ''
                    this.removback()

                } else {
                    this.keyword = ''
                    this.csm = '请输入城市名1'
                }

            } else if (/^[0-9]+$/.test(content)) {
                //  内容数字
                this.list = [' ']
                this.csm = '没找到，您输入的' + this.keyword
            } else if (/^[a-zA-Z]+$/.test(content)) {
                //  内容字母
                this.searchAlph(content)

            } else if (/^[\u4e00-\u9fa5]+$/.test(content)) {
                //内容汉字
                let result = []
                for (let i in this.cities) {
                    // 先把汉字使用disreslove进行转码然后使用substr截取第一个汉字的字母，再使用subste截取汉字的首字母
                    let haveAlph = i.toLowerCase().indexOf(disreslove(content.substr(0, 1)).substr(0, 1)) > -1

                    if (haveAlph) {
                        this.cities[i].forEach((value) => {
                            if (value.name.indexOf(content) > -1) {
                                result.push(value)
                                this.list = result

                            } else if (content.indexOf(value.name) > -1) {
                                this.csm = '没找到，您输入的' + this.keyword

                            } else {
                                this.loopWord(content)
                                if (!(this.iWord.indexOf(content.substr(content.length - 1, 1)) > -1)) {
                                    this.csm = '没找到，您输入的' + this.keyword
                                    this.iWord = ''
                                }
                            }

                        })

                    }

                }
            } else {
                //其他内容
                this.list = [' ']
                this.csm = '没找到，您输入的' + this.keyword

            }
        }
    },
    methods: {
        initScroll1() {
            this.$nextTick(() => { //vue.$nextTick()方法来实现dom数据更新后延迟执行后续代码
                if (!this.Scroll) {
                    this.Scroll = new BScroll(this.$refs.awrapper1, {
                        click: true, // 配置允许点击事件
                        scrollY: true, // 开启纵向滚动
                        pullUpLoad: true, //可使用{对象}添加更多功能
                        mouseWheel: {
                            speed: 20, //设置速度
                            invert: false,
                            easeTime: 300
                        }
                    })
                } else {
                    this.Scroll.refresh() // 重新计算 better-scroll，当 DOM 结构发生变化的时确保滚动效果正常

                }
                // console.log(this.Scroll)
            })
        },
        handleItemClick(city) {
            this.$store.dispatch('change', city)
            this.$router.push('/')
        },
        loopWord(content) {
            const ci = this.cities
            for (let i in ci) {
                // 先把汉字使用disreslove进行转码然后使用substr截取第一个汉字的字母，再使用subste截取汉字的首字母
                // 让循环出来的内容去遍历搜索框中输入的内容大于-1时，也就是判断有没有这个内容
                if (i.toLowerCase().indexOf(disreslove(content.substr(0, 1)).substr(0, 1)) > -1) {

                    let arr = []
                    ci[i].forEach((value) => {
                        arr.push(value.name.substr(content.length - 1, 1))
                        let a = [...new Set(arr)]
                        this.iWord = a.toString()

                    })
                }
            }
        },
        searchAlph(content) {
            //把输入的字母转成小写
            const lowerContent = content.toLowerCase()

            let result = []
            for (let i in this.cities) {
                let haveAlph = i.toLowerCase().indexOf(lowerContent.substr(0, 1)) > -1

                if (haveAlph) {
                    this.cities[i].forEach((value) => {
                        if (value.spell.indexOf(lowerContent) > -1) {
                            result.push(value)
                            this.list = result
                            // console.log(haveAlph)

                        } else if (lowerContent.indexOf(value.spell) > -1) {
                            this.csm = '没找到，您输入的' + this.keyword

                        } else {
                            this.loopalphabet(lowerContent)
                            if (!(this.iLetter.indexOf(lowerContent.substr(lowerContent.length - 1, 1)) > -1)) {
                                this.csm = '没找到，您输入的' + this.keyword
                                this.iLetter = ''
                            }
                        }

                    })

                } else if (
                    lowerContent.substr(0, 1) === 'u' ||
                    lowerContent.substr(0, 1) === 'i' ||
                    lowerContent.substr(0, 1) === 'v' ||
                    lowerContent.substr(0, 1) === 'o') {
                    this.csm = '没找到，您输入的' + this.keyword
                    this.list = ['']

                }

            }

        },
        loopalphabet(lowerContent) {
            const ci = this.cities
            for (let i in ci) {
                if (i.toLowerCase().indexOf(lowerContent.substr(0, 1) > -1)) {
                    let arr = []
                    ci[i].forEach((value) => {
                        arr.push(value.spell.substr(lowerContent.length - 1, 1))
                        let a = [...new Set(arr)]
                        this.iLetter = a.toString()

                    })
                }
            }
        },

        xclear() {
            this.keyword = ' '
            this.flag = '33'
        },
        buttonclear() {
            this.keyword = ' '
            this.flag = '2'
        },
        addclass() {
            this.changesymbol = "changesymbol"
            this.changebutton = "changebutton"
            this.changesearch = "changesearch"
        },
        removeclass() {
            this.changesymbol = ""
            this.changebutton = ""
            this.changesearch = ""
        },
        removback() {
            this.removeclass()
            this.list = []
            this.csm = ''
        },

    },
}
</script>

<style scoped>
.cannel {

    display: none;

}

.changesymbol {

    display: inline-block;
    position: absolute;
    top: 10px;
    right: 105px;
    width: 20px;
    height: 18PX;
    border-radius: 5px;
    background-color: #CCC;
    text-align: center;

}

.changebutton {
    width: 45px;
    display: block;
    color: #888;
    position: absolute;
    top: 8px;
    right: 50px;
    border-radius: 5px;

}

.changesearch {
    width: 60%;
    margin-right: 5px;
    border: #ccc solid 1px;
}

button {
    display: none;
}

.search {

    background-color: #fff;
    position: relative;

}

input {
    width: 96%;
    height: 30px;
    line-height: 25px;
    margin: 4px 7px;
    padding-left: 50px;
    border-radius: 5px;
    box-sizing: border-box;
}

.iconfont {
    position: absolute;
    left: 15px;
    top: 8px;

}

.search-first {
    height: 30px;
    background-color: rgb(207, 204, 204);

}

.search-content {
    overflow: hidden;
    width: 100%;
    height: 0px;
    padding-bottom: 165%;
    position: absolute;
    top: 40px;
    left: 0px;
    z-index: 2;
    background-color: rgb(255, 255, 255);

}

.search-item {
    display: inline-block;
    width: 100%;
    margin: 0.5px 0px;
    background-color: rgb(255, 255, 255);
    line-height: 30px;
    padding: 5px 5px;

}
</style>
